<template>
  <div class="publicpageview">
    <div class="page-layout">
      <!-- 左侧管理年度区域 -->
      <div class="left-panel">
        <div class="year-panel">
          <h3 class="panel-title">管理年度</h3>
          <div class="year-list">
            <div v-for="year in yearList" :key="year.value"
              :class="['year-item', { 'active': selectedYear === year.value }]" @click="handleYearChange(year.value)">
              <span class="year-text">{{ year.label }}</span>
              <span class="year-count">({{ year.count }})</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="right-panel">
        <div class="publicformview">
          <el-form :inline="true" :model="listQuery" size="mini" ref="searchForm">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="区房屋管理单位：" prop="districtId">
                  <CompanySelect v-model="listQuery.districtId" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="管理部(分中心)：" prop="houseAdminId">
                  <DeptBrowser v-model="listQuery.houseAdminId" :queryDistrictId="listQuery.districtId" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="房屋结构:" prop="Structure">
                  <el-select v-model="listQuery.Structure" clearable>
                    <el-option label="钢混结构" value="钢混结构"></el-option>
                    <el-option label="砖混结构" value="砖混结构"></el-option>
                    <el-option label="砖木结构" value="砖木结构"></el-option>
                    <el-option label="简易结构" value="简易结构"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="房屋性质:" prop="Livingway">
                  <el-select v-model="listQuery.Livingway" clearable>
                    <el-option label="住宅" value="住宅"></el-option>
                    <el-option label="非住宅" value="非住宅"></el-option>

                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="使用情况:" prop="useCondition">
                  <el-select v-model="listQuery.useCondition" clearable>
                    <el-option label="未使用" :value="0"></el-option>

                    <el-option label="正常使用" :value="1"></el-option>
                    <el-option label="空置" :value="2"></el-option>
                    <el-option label="待拆迁" :value="3"></el-option>

                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="完损程度:" prop="degreeDamage">
                  <el-select v-model="listQuery.degreeDamage" clearable>
                    <el-option label="完好" :value="1"></el-option>
                    <el-option label="基本完好" :value="2"></el-option>
                    <el-option label="一般损坏" :value="3"></el-option>
                    <el-option label="严重损坏" :value="4"></el-option>
                    <el-option label="危险房屋" :value="5"></el-option>

                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="建筑形式:" prop="houseStructure">
                  <el-select v-model="listQuery.houseStructure" clearable>
                    <el-option label="楼房" value="楼房"></el-option>
                    <el-option label="平房" value="平房"></el-option>

                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="建筑年代：" prop="BuildYear">
                  <el-date-picker v-model="listQuery.BuildYear" type="year" placeholder="请选择建筑年代" value-format="yyyy"
                    style="width: 100%">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12" style="text-align: right;">
                <div>
                  <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
                  <el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <div class="publitableview">
          <el-button type="primary" size="mini" @click="handleAddRecord">新增台账</el-button>
          <el-button type="success" size="mini" @click="handleBatchImport">批量导入</el-button>
          <el-table v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">
            <el-table-column align="center" label="序号" type="index" width="60">
            </el-table-column>

            <el-table-column align="center" label="区房屋管理单位" prop="districtName" width="140">
            </el-table-column>

            <el-table-column align="center" label="管理部(分中心)" prop="houseAdminName" width="130">
            </el-table-column>

            <el-table-column align="center" label="坐落地点" prop="address" min-width="200">
            </el-table-column>

            <el-table-column align="center" label="管片代码" prop="classCode" width="100">
            </el-table-column>

            <el-table-column align="center" label="所编号" prop="blockId" width="80">
            </el-table-column>

            <el-table-column align="center" label="建筑面积" prop="buildingArea" width="100">
            </el-table-column>

            <el-table-column align="center" label="建筑年代" prop="buildingDate" width="100">
            </el-table-column>

            <el-table-column align="center" label="建筑形式" prop="buildingForm" width="100">
              <template slot-scope="scope">
                {{ getDictName('buildingFormDict', scope.row.buildingForm) }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="房屋性质" prop="houseNature" width="100">
              <template slot-scope="scope">
                {{ getDictName('houseNatureDict', scope.row.houseNature) }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="房屋结构" prop="houseStructure" width="100">
              <template slot-scope="scope">
                {{ getDictName('houseStructureDict', scope.row.houseStructure) }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="使用状况" prop="useCondition" width="100">
              <template slot-scope="scope">
                {{ getDictName('useConditionDict', scope.row.useCondition) }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="完损程度" prop="degreeDamage" width="100">
              <template slot-scope="scope">
                {{ getDictName('degreeDamageDict', scope.row.degreeDamage) }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="操作" width="150" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button type="text" size="mini" @click="handleView(scope.row)">详情</el-button>
                <el-button type="text" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="publicpaginationview">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]"
              :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" small>
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <!-- 台账弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px" @close="handleDialogClose">
      <el-form :model="formData" :rules="formRules" ref="addForm" label-width="150px" size="small">
        <el-form-item label="所号：" prop="blockId">

          <BlockBrowser v-model="formData.blockId" :display-label.sync="formData.blockName" :disabled="isReadonly"
            @change="handleBlockChange" />
        </el-form-item>

        <el-form-item label="区房屋管理单位：" prop="districtName">
          {{formData.districtName}}
        </el-form-item>

        <el-form-item label="管理部(分中心)：" prop="houseAdminName">
          {{formData.houseAdminName}}
        </el-form-item>

        <el-form-item label="坐落地点：" prop="address">
          {{formData.address}}
        </el-form-item>

        <el-form-item label="管片代码：" prop="classCode">
          {{formData.classCode}}
        </el-form-item>

        <el-form-item label="建筑面积：" prop="buildingArea">
          {{formData.buildingArea}}
        </el-form-item>

        <el-form-item label="建筑年代：" prop="buildingDate">
          {{formData.buildingDate}}
        </el-form-item>

        <el-form-item label="房屋结构：" prop="houseStructure">
          {{ formData.houseStructure }}
        </el-form-item>

        <el-form-item label="建筑形式：" prop="buildingForm">
          {{ formData.buildingForm }}

        </el-form-item>

        <el-form-item label="房屋性质：" prop="houseNature">
          {{ formData.houseNature }}

        </el-form-item>

        <el-form-item label="使用状况：" prop="useCondition">
          <el-select v-model="formData.useCondition" v-if="!isReadonly" placeholder="请选择使用状况" style="width: 100%">
            <el-option v-for="item in dictData.useConditionDict" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <span v-else>{{ getDictName('useConditionDict', formData.useCondition) }}</span>
        </el-form-item>

        <el-form-item label="完损程度：" prop="degreeDamage">
          <el-select v-model="formData.degreeDamage" v-if="!isReadonly" placeholder="请选择完损程度" style="width: 100%">
            <el-option v-for="item in dictData.degreeDamageDict" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <span v-else>{{ getDictName('degreeDamageDict', formData.degreeDamage) }}</span>
        </el-form-item>

        <el-form-item label="管理年份：" prop="years">
          <el-date-picker v-if="!isReadonly" v-model="formData.years" type="year" :disabled="isReadonly"
            placeholder="请选择管理年份" value-format="yyyy" style="width: 100%">
          </el-date-picker>
          <span v-else>{{ formData.years }}</span>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ isReadonly ? '关 闭' : '取 消' }}</el-button>
        <el-button v-if="!isReadonly" type="primary" @click="handleSubmit" :loading="submitLoading">保 存</el-button>
      </div>
    </el-dialog>

    <!-- 批量导入弹窗 -->
    <FileUpload :visible.sync="uploadDialogVisible" title="批量导入严重损坏房屋台账" width="900px" :upload-action="uploadAction"
      accept=".xls,.xlsx" file-type-text="Excel文件" :max-size="5" tip-text="只能上传Excel文件(.xls/.xlsx)，且不超过5MB"
      :show-template="true" template-name="严重损坏房屋台账模板" :template-url="templateDownloadUrl" :show-file-list="true"
      :show-status="false" :show-actions="true" :show-preview="false" confirm-text="导 入"
      @close="handleUploadDialogClose" @confirm="handleImport" @download-template="downloadTemplate" />

  </div>
</template>

<script>
import { getSeriousHouseList, saveOrUpdateSeriousHouse, addSeriousHouse, getSeriousHouseYearList, deleteSeriousHouse, getSeriousHouseDetails } from '@/api/safe/fangwuanquantaizhang/xunqixunchafangwutaizhang'
import FileUpload from '@/components/FileUpload.vue'
import { convertObjectIntegersToStrings, convertSpecificFieldsToStrings } from '@/utils/dataUtils'
import BlockBrowser from "@/components/SysBrowser/BlockBrowser.vue";
import DeptBrowser from "@/components/SysBrowser/DeptBrowser.vue";
import CompanySelect from "@/components/commonSelect/companySelect.vue";
import { importFloodSeason } from '@/api/safe'
export default {
  name: 'xunqixunchafangwutaizhang',

  components: {
    BlockBrowser,
    DeptBrowser,
    FileUpload,
    CompanySelect
  },

  data() {
    return {
      // 字典数据
      dictData: {
        // 房屋结构
        houseStructureDict: [
          { id: '1', name: '砖混结构' },
          { id: '2', name: '框架结构' },
          { id: '3', name: '钢结构' },
          { id: '4', name: '木结构' }
        ],
        // 建筑形式
        buildingFormDict: [
          { id: '1', name: '平房' },
          { id: '2', name: '楼房' },
          { id: '3', name: '别墅' }
        ],
        // 房屋性质
        houseNatureDict: [
          { id: '1', name: '住宅' },
          { id: '2', name: '商业' },
          { id: '3', name: '办公' },
          { id: '4', name: '工业' }
        ],
        // 使用状况
        useConditionDict: [
          { id: '0', name: '未使用' },
          { id: '1', name: '正常使用' },
          { id: '2', name: '空置' },
          { id: '3', name: '待拆迁' }
        ],
        // 完损程度
        degreeDamageDict: [
          { id: '1', name: '完好' },
          { id: '2', name: '基本完好' },
          { id: '3', name: '一般损坏' },
          { id: '4', name: '严重损坏' },
          { id: '5', name: '危险房屋' }
        ]
      },
      selectedYear: "",
      yearList: [],
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        year: "2025",
        // 坐落地点
        blockId: "",          // 所编号

        classCode: "",        // 管片代码
        districtId: "",     // 区房屋管理单位
        houseAdminId: "",    // 管理部(分中心)
        Structure: "",
        BuildYear: "",
        Livingway: "",
        useCondition: null,
        degreeDamage: null,
        BuildingFormDetail: ""
      },
      total: 0,
      list: [],
      listLoading: false,
      dialogVisible: false,
      uploadDialogVisible: false,
      submitLoading: false,
      importLoading: false,
      dialogTitle: "新增台账",
      isReadonly: false,
      currentEditId: null,
      uploadAction: "/api/upload",
      templateDownloadUrl: "/api/safe/seriousHouse/downloadTemplate",
      formData: {
        id: null,                    // ID (修改时使用)
        adminId: null,               // 创建管理员ID
        blockId: "",                 // 所号ID
        blockName: "",               // 所号名称
        address: "",                 // 坐落地点
        buildingArea: "",            // 建筑面积
        buildingDate: "",            // 建筑年代
        buildingForm: null,          // 建筑形式(1平房; 2楼房; 3别墅)
        classCode: "",               // 管片代码
        degreeDamage: null,          // 完损程度(1完好; 2基本完好; 3一般损坏; 4严重损坏; 5危险房屋)
        districtId: null,            // 区房屋管理单位ID
        districtName: "",            // 区房屋管理单位名称
        houseAdminId: null,          // 管理部(分中心)ID
        houseAdminName: "",          // 管理部(分中心)名称
        houseNature: null,           // 房屋性质(1住宅; 2商业; 3办公; 4工业)
        houseStructure: null,        // 房屋结构(1砖混结构; 2框架结构; 3钢结构; 4木结构)
        useCondition: null,          // 使用状况(0未使用; 1正常使用; 2空置; 3待拆迁)
        years: new Date().getFullYear().toString() // 管理年份
      },
      formRules: {
        blockId: [
          { required: true, message: '请输入所号', trigger: 'blur' }
        ],
        districtName: [
          { required: true, message: '请输入区房屋管理单位', trigger: 'blur' }
        ],
        houseAdminName: [
          { required: true, message: '请输入管理部', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入坐落地点', trigger: 'blur' }
        ],
        buildingArea: [
          { required: false, message: '请输入建筑面积', trigger: 'blur' }
        ],
        buildingDate: [
          { required: false, message: '请输入建筑年代', trigger: 'blur' }
        ],
        houseStructure: [
          { required: false, message: '请选择房屋结构', trigger: 'change' }
        ],
        buildingForm: [
          { required: false, message: '请选择建筑形式', trigger: 'change' }
        ],
        houseNature: [
          { required: false, message: '请选择房屋性质', trigger: 'change' }
        ],
        useCondition: [
          { required: true, message: '请选择使用状况', trigger: 'change' }
        ],
        degreeDamage: [
          { required: true, message: '请选择完损程度', trigger: 'change' }
        ],
        years: [
          { required: true, message: '请选择管理年份', trigger: 'change' }
        ]
      }
    };
  },

  computed: {
    // 确保年份值的类型安全
    safeYearsValue() {
      if (this.formData.years && typeof this.formData.years === 'string') {
        return this.formData.years;
      } else if (this.formData.years && typeof this.formData.years === 'number') {
        return this.formData.years.toString();
      }
      return '';
    }
  },

  mounted() {
    this.getYearList();
  },

  methods: {
    // 通用字典名称查找方法
    getDictName(dictType, id) {
      const item = this.dictData[dictType].find(item => item.id === String(id));
      return item ? item.name : id;
    },

    // 根据名称查找ID的辅助方法
    getDictIdByName(dictType, name) {
      if (!name) return null;
      const item = this.dictData[dictType].find(item => item.name === name);
      return item ? item.id : null;
    },

    // 获取年份列表
    getYearList() {
      getSeriousHouseYearList()
        .then(response => {
          if (response.code === 200) {
            this.yearList = response.data.map(item => ({
              value: item.years,
              label: `${item.years}年`,
              count: item.count
            }));

            // 设置第一个年份为默认选中，并获取对应数据
            if (this.yearList.length > 0) {
              this.selectedYear = this.yearList[0].value;
              this.listQuery.year = this.selectedYear;
              this.getList();
            }
          } else {
            this.$message.error(response.message || '获取年份列表失败');
          }
        })
        .catch(error => {
          console.error('获取年份列表失败:', error);
          this.$message.error('获取年份列表失败，请检查网络连接');
        });
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    // 获取列表数据
    getList() {
      this.listLoading = true;


      // 调用严重损坏房屋台账分页接口
      getSeriousHouseList(this.listQuery)
        .then(response => {
          this.listLoading = false;
          if (response.code === 200) {
            this.list = convertObjectIntegersToStrings(response.data.list) || [];
            this.total = response.data.total || 0;
          } else {
            this.$message.error(response.message || '获取数据失败');
          }
        })
        .catch(error => {
          this.listLoading = false;
          console.error('获取严重损坏房屋台账数据失败:', error);
          this.$message.error('获取数据失败，请检查网络连接');
        });
    },
    // 搜索
    handleSearch() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
    // 年度切换
    handleYearChange(year) {
      this.selectedYear = year;
      this.listQuery.year = year;
      this.listQuery.pageNum = 1;
      this.getList();
    },

    // 新增台账
    handleAddRecord() {
      this.dialogTitle = "新增台账";
      this.isReadonly = false;
      this.currentEditId = null;
      this.dialogVisible = true;
      this.resetFormData();
    },
    // 批量导入
    handleBatchImport() {
      this.uploadDialogVisible = true;
      this.fileList = [];
    },
    // 上传弹窗关闭
    handleUploadDialogClose() {
      // 弹窗关闭时的处理，FileUpload组件会自动清理
    },
    // 下载模板
    downloadTemplate() {
      // 如果FileUpload组件没有templateUrl，则使用API下载
      this.$message.info('正在下载模板...');
      // 这里可以调用API下载模板
    },

    // 导入数据
    handleImport(fileList) {
      if (!fileList || fileList.length === 0) {
        this.$message.warning('请先选择要导入的文件');
        return;
      }

      this.importLoading = true;
      // 模拟导入过程
      let formData = new FormData();
      formData.append("file", fileList[0].raw)
      importFloodSeason(formData).then(res => {
        this.importLoading = false;
        this.uploadDialogVisible = false;
        this.$message.success("导入成功！");
        this.getList(); // 刷新列表
        this.getYearList(); // 刷新年度管理
      })
    },
    // 弹窗关闭
    handleDialogClose() {
      this.resetFormData();
      this.$refs.addForm.resetFields();
    },
    // 重置表单数据
    resetFormData() {
      this.formData = {
        id: null,
        adminId: null,
        blockId: "",
        blockName: "",
        address: "",
        buildingArea: "",
        buildingDate: "",
        buildingForm: null,
        classCode: "",
        degreeDamage: null,
        districtId: null,
        districtName: "",
        houseAdminId: null,
        houseAdminName: "",
        houseNature: null,
        houseStructure: null,
        useCondition: null,
        years: new Date().getFullYear().toString()
      };
    },
    // 表单提交
    handleSubmit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true;

          // 构建提交数据，过滤掉不需要的字段
          const submitData = { ...this.formData };

          // 新增时不传递这些字段
          if (!this.currentEditId) {
            delete submitData.id;
            delete submitData.createTime;
            delete submitData.adminId;
          }

          // 根据是否有ID决定使用新增还是修改接口
          const apiCall = this.currentEditId ? saveOrUpdateSeriousHouse(submitData) : addSeriousHouse(submitData);

          apiCall
            .then(response => {
              this.submitLoading = false;
              if (response.code === 200) {
                this.dialogVisible = false;
                const action = this.currentEditId ? '修改' : '新增';
                this.$message.success(`${action}台账成功！`);
                this.getList(); // 刷新列表
                this.getYearList(); // 刷新年度管理
              } else {
                this.$message.error(response.message || '操作失败');
              }
            })
            .catch(error => {
              this.submitLoading = false;
              console.error('保存严重损坏房屋台账失败:', error);
              this.$message.error('操作失败，请检查网络连接');
            });
        } else {
          this.$message.error('请填写完整信息');
          return false;
        }
      });
    },
    // 查看详情
    handleView(row) {
      this.dialogTitle = "查看台账详情";
      this.isReadonly = true;
      this.currentEditId = row.id;
      this.getDetailData(row.id);
      this.dialogVisible = true;
    },
    // 修改记录
    handleUpdate(row) {
      this.dialogTitle = "修改台账";
      this.isReadonly = false;
      this.currentEditId = row.id;
      this.getDetailData(row.id);
      this.dialogVisible = true;
    },
    // 获取详情数据
    getDetailData(id) {
      getSeriousHouseDetails(id)
        .then(response => {
          if (response.code === 200 && response.data) {
            // 使用 convertObjectIntegersToStrings 处理返回的数据
            this.formData = convertObjectIntegersToStrings(response.data);
          } else {
            this.$message.error(response.message || '获取详情失败');
          }
        })
        .catch(error => {
          console.error('获取详情失败:', error);
          this.$message.error('获取详情失败');
        });
    },
    // 删除记录
    handleDelete(id) {
      this.$confirm('此操作将删除该条内容，请确认是否继续操作？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用删除接口
        deleteSeriousHouse(id)
          .then(response => {
            if (response.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getList(); // 刷新列表
              this.getYearList(); // 刷新年度管理
            } else {
              this.$message.error(response.message || '删除失败');
            }
          })
          .catch(error => {
            console.error('删除严重损坏房屋台账失败:', error);
            this.$message.error('删除失败，请检查网络连接');
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleBlockChange(browseData) {
      console.log(browseData)
      this.formData.districtId = browseData.did
      this.formData.districtName = browseData.dname
      this.formData.houseAdminId = browseData.aid
      this.formData.houseAdminName = browseData.houseAdminName
      this.formData.classCode = browseData.groupNumber
      this.formData.address = browseData.address
      this.formData.buildingArea = browseData.buildingarea
      this.formData.buildingDate = browseData.buildyear
      this.formData.houseStructure = browseData.structure;
      this.formData.buildingForm = browseData.buildingform;
      this.formData.houseNature = browseData.livingway;
      // this.formData.useCondition = browseData.conditiontext
    }
  }
};
</script>

<style scoped>
/* 页面布局样式 */
.page-layout {
  display: flex;
  height: 100%;
  gap: 5px;
}

/* 左侧面板样式 */
.left-panel {
  width: 240px;
  flex-shrink: 0;
}

.year-panel {
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  padding: 0;
  overflow: hidden;
}

.panel-title {
  margin: 0;
  padding: 16px 20px;
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.year-list {
  padding: 0;
}

.year-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s;
}

.year-item:last-child {
  border-bottom: none;
}

.year-item:hover {
  background-color: #f5f7fa;
}

.year-item.active {
  background-color: #ecf5ff;
  color: #409eff;
}

.year-text {
  font-size: 14px;
  font-weight: 500;
}

.year-count {
  font-size: 12px;
  color: #909399;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 10px;
}

.year-item.active .year-count {
  background: #409eff;
  color: #fff;
}

/* 右侧面板样式 */
.right-panel {
  flex: 1;
  min-width: 0;
}

/* 页面样式继承公共样式类 publicpageview, publicformview, publitableview */

/* 批量导入上传组件样式 */
.upload-container {
  padding: 20px 0;
  width: 100%;
}

.upload-dragger {
  width: 100% !important;
}

.upload-dragger .el-upload {
  width: 100% !important;
}

.upload-dragger .el-upload-dragger {
  width: 100% !important;
  height: 200px;
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease;
  background-color: #fafafa;
  box-sizing: border-box;
}

.upload-dragger .el-upload-dragger:hover {
  border-color: #409EFF;
  width: 100%;
}

.upload-dragger .el-upload-dragger .el-icon-upload {
  font-size: 67px;
  color: #C0C4CC;
  margin: 40px 0 16px;
  line-height: 50px;
  width: 100%;
}

.upload-dragger .el-upload__text {
  color: #606266;
  font-size: 14px;
  text-align: center;
}

.upload-dragger .el-upload__text em {
  color: #409EFF;
  font-style: normal;
}

.template-download {
  margin-top: 15px;
  font-size: 14px;
  color: #606266;
}

.template-download .el-button--text {
  color: #409EFF;
  padding: 0;
  font-size: 14px;
}

::v-deep .el-upload {
  width: 100% !important;
}

::v-deep .el-upload-dragger {
  width: 100% !important;
}
</style>